<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sa="http://www.thymeleaf.org/extras/sa-token">

<head th:replace="index::head">
</head>

<body>
    <!-- 导航栏 -->
    <ul class="layui-nav" th:replace="index::nav">

    </ul>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-xs2" th:replace="index::snav">
            </div>
            <div class="layui-col-xs10">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">个人信息</li>
                        <li>修改密码</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-card">
                                <div class="layui-card-body">
                                    <form class="layui-form" action="" lay-filter="testform">
                                        <input type="hidden" name="id" th:value="${user.id}">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">用户名</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="title" th:value="${user.username}" readonly lay-verify="required"
                                                    placeholder="请输入用户名" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">昵称</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="nickname" th:value="${user.nickname}" required
                                                    lay-verify="required" placeholder="请输入昵称" autocomplete="off"
                                                    class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">电话</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="phone" th:value="${user.phone}" required lay-verify="required"
                                                    placeholder="请输入电话" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <div class="layui-input-block">
                                                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <form class="layui-form" action="" lay-filter="testform">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">原密码</label>
                                    <div class="layui-input-block">
                                        <input type="password" name="oldPass" value="" required lay-verify="required"
                                            placeholder="请输入原密码" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">新密码</label>
                                    <div class="layui-input-block">
                                        <input type="password" name="newPass" value="" required lay-verify="required"
                                            placeholder="请输入新密码" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="formDemo2">立即提交</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<script>
    layui.use(['layer'], function(args){
      var layer = layui.layer;
      var form = layui.form;
      form.on('submit(formDemo)', function(data){
          $.post('/user/register',data.field,function(data){
            if(data.code===200){
                layer.msg('信息修改OK'); 
                setTimeout(() => {
                    window.location.reload();
                }, 1200);
            }else{
                layer.msg(data.msg); 
            }
          })
          return false;
      });

      form.on('submit(formDemo2)', function(data){
          $.post('/user/updatePass',data.field,function(data){
            if(data.code===200){
                layer.msg('修改OK'); 
                setTimeout(() => {
                    window.location.reload();
                }, 1200);
            }else{
                layer.msg(data.msg); 
            }
          })
          return false;
      });
      
      
    }); 
</script>
</html>